<template>
  <div class="login-container">
    <!-- 装饰背景 -->
    <div class="backdrop">
      <div class="gradient-blur gradient-blur-1" />
      <div class="gradient-blur gradient-blur-2" />
      <div class="gradient-blur gradient-blur-3" />
      <div class="grid-pattern" />
      <!-- 浮动粒子 -->
      <div class="particles">
        <div v-for="i in 20" :key="i" class="particle" :style="getParticleStyle(i)" />
      </div>
    </div>

    <div class="login-card-wrapper">
      <!-- Logo 和品牌 -->
      <div class="brand-section">
        <div class="logo-badge">
          <div class="logo-glow pulse" />
          <div class="logo-icon">
            <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="logo-svg">
              <path d="M13 2L3 14h8l-1 8 10-12h-8l1-8z" fill="currentColor" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
              <circle cx="12" cy="12" r="2" fill="white" opacity="0.9"/>
            </svg>
          </div>
        </div>
        <h1 class="brand-title">DevOps SmartBot</h1>
        <p class="brand-subtitle">Intelligent Operations Platform</p>
      </div>

      <!-- 登录卡片 -->
      <div class="login-card">
        <div class="card-content">
          <!-- 标题 -->
          <div class="login-header">
            <h2 class="login-title">Sign In</h2>
            <p class="login-subtitle">Use your username or email and password to sign in</p>
          </div>

          <!-- 表单 -->
          <a-form
            :model="formState"
            :rules="rules"
            @finish="handleSubmit"
            layout="vertical"
            class="login-form"
          >
            <a-form-item name="email" class="form-item-custom">
              <template #label>
                <span class="form-label">Username or Email</span>
              </template>
              <a-input
                v-model:value="formState.email"
                size="large"
                placeholder="Enter username or email"
                autocomplete="username"
                class="input-custom"
              >
                <template #prefix>
                  <UserOutlined class="input-icon" />
                </template>
              </a-input>
            </a-form-item>

            <a-form-item name="password" class="form-item-custom">
              <template #label>
                <span class="form-label">Password</span>
              </template>
              <a-input-password
                v-model:value="formState.password"
                size="large"
                placeholder="Enter your password"
                autocomplete="current-password"
                class="input-custom"
              >
                <template #prefix>
                  <LockOutlined class="input-icon" />
                </template>
              </a-input-password>
            </a-form-item>

            <div class="form-options">
              <a-checkbox v-model:checked="formState.remember" class="remember-checkbox">
                <span class="checkbox-label">Remember me</span>
              </a-checkbox>
              <a href="#" class="forgot-link">Forgot password?</a>
            </div>

            <a-button
              type="primary"
              html-type="submit"
              :loading="loading"
              block
              size="large"
              class="submit-button"
            >
              <template #icon v-if="loading">
                <span></span>
              </template>
              <span class="button-text">
                {{ loading ? 'Signing in...' : 'Sign In' }}
              </span>
            </a-button>
          </a-form>

          <!-- 快速登录 -->
          <div class="quick-login-section">
            <div class="divider">
              <span class="divider-text">Quick Login</span>
            </div>
            <div class="quick-login-grid">
              <button
                v-for="account in quickAccounts"
                :key="account.email"
                @click="handleQuickLogin(account.email, account.password)"
                class="quick-login-card"
              >
                <component :is="account.icon" class="quick-icon" />
                <span class="quick-label">{{ account.label }}</span>
              </button>
            </div>
          </div>
        </div>
      </div>

      <div class="footer-text">
        Powered by Prometheus · Claude AI · Vue 3
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref, h } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { message } from 'ant-design-vue'
import { useAuthStore } from '@/stores/authStore'
import { MailOutlined, LockOutlined, CrownOutlined, SettingOutlined, UserOutlined } from '@ant-design/icons-vue'

const router = useRouter()
const route = useRoute()
const authStore = useAuthStore()

const loading = ref(false)

const formState = reactive({
  email: '',
  password: '',
  remember: true,
})

const rules = {
  email: [
    { required: true, message: 'Please enter username or email', trigger: 'blur' },
  ],
  password: [{ required: true, message: 'Please enter password', trigger: 'blur' }],
}

const quickAccounts = [
  { email: 'admin', password: 'admin123', label: 'Admin', icon: CrownOutlined },
  { email: 'ops', password: 'ops123', label: 'Ops', icon: UserOutlined },
]

const handleSubmit = async () => {
  loading.value = true
  try {
    await authStore.login(formState.email, formState.password)

    // Display success message
    message.success({
      content: 'Login successful!',
      duration: 1.5,
    })

    // Delayed redirect to let user see success message
    setTimeout(() => {
      const redirect = (route.query.redirect as string) || '/dashboard'
      router.push(redirect)
    }, 800)
  } catch (error: any) {
    message.error(error.message || 'Login failed')
    loading.value = false
  }
}

const handleQuickLogin = (email: string, password: string) => {
  formState.email = email
  formState.password = password
}

const getParticleStyle = (index: number) => {
  const randomX = Math.random() * 100
  const randomY = Math.random() * 100
  const randomDelay = Math.random() * 20
  const randomDuration = 15 + Math.random() * 10

  return {
    left: `${randomX}%`,
    top: `${randomY}%`,
    animationDelay: `${randomDelay}s`,
    animationDuration: `${randomDuration}s`,
  }
}
</script>

<style scoped>
.login-container {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: linear-gradient(to bottom, #f8fafc, #f1f5f9);
}

.backdrop {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.gradient-blur {
  position: absolute;
  border-radius: 9999px;
  filter: blur(96px);
}

.gradient-blur-1 {
  top: -8rem;
  left: -8rem;
  height: 24rem;
  width: 24rem;
  background: linear-gradient(to bottom right, rgba(99, 102, 241, 0.3), rgba(217, 70, 239, 0.3));
}

.gradient-blur-2 {
  bottom: -6rem;
  right: -6rem;
  height: 24rem;
  width: 24rem;
  background: linear-gradient(to top right, rgba(56, 189, 248, 0.3), rgba(45, 212, 191, 0.3));
  animation: float 20s ease-in-out infinite;
  animation-delay: 5s;
}

.gradient-blur-3 {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 20rem;
  width: 20rem;
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.2), rgba(236, 72, 153, 0.2));
  animation: pulse 15s ease-in-out infinite;
}

@keyframes float {
  0%, 100% {
    transform: translateY(0) rotate(0deg);
  }
  50% {
    transform: translateY(-20px) rotate(5deg);
  }
}

@keyframes pulse {
  0%, 100% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0.2;
  }
  50% {
    transform: translate(-50%, -50%) scale(1.1);
    opacity: 0.3;
  }
}

.grid-pattern {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(to right, rgba(99, 102, 241, 0.085) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(99, 102, 241, 0.085) 1px, transparent 1px);
  background-size: 24px 24px;
  mask-image: radial-gradient(280px 220px at center, black, transparent);
}

.login-card-wrapper {
  position: relative;
  width: 100%;
  max-width: 28rem;
}

/* 品牌区域 */
.brand-section {
  text-align: center;
  margin-bottom: 2rem;
}

.logo-badge {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.5rem;
}

.logo-glow {
  position: absolute;
  inset: -0.5rem;
  border-radius: 1.25rem;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
  filter: blur(20px);
  opacity: 0.7;
}

.logo-glow.pulse {
  animation: glow-pulse 4s ease-in-out infinite;
}

@keyframes glow-pulse {
  0%, 100% {
    opacity: 0.7;
    transform: scale(1);
    filter: blur(20px);
  }
  50% {
    opacity: 0.9;
    transform: scale(1.1);
    filter: blur(24px);
  }
}

.logo-icon {
  position: relative;
  height: 4.5rem;
  width: 4.5rem;
  border-radius: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  box-shadow: 0 20px 40px -10px rgba(102, 126, 234, 0.4);
}

.logo-svg {
  width: 2.5rem;
  height: 2.5rem;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
}

.brand-title {
  font-size: 2rem;
  font-weight: 700;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin: 0 0 0.5rem 0;
  letter-spacing: -0.02em;
}

.brand-subtitle {
  font-size: 0.875rem;
  color: #64748b;
  margin: 0;
  font-weight: 500;
}

/* 登录头部 */
.login-header {
  margin-bottom: 2rem;
}

.login-title {
  font-size: 1.5rem;
  font-weight: 600;
  color: #0f172a;
  margin: 0 0 0.5rem 0;
  letter-spacing: -0.025em;
}

.login-subtitle {
  font-size: 0.875rem;
  color: #64748b;
  margin: 0;
  font-weight: 400;
}

/* 登录卡片 */
.login-card {
  border-radius: 16px;
  border: 1px solid rgba(226, 232, 240, 0.8);
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(20px);
  box-shadow:
    0 4px 6px -1px rgba(0, 0, 0, 0.05),
    0 2px 4px -1px rgba(0, 0, 0, 0.03),
    0 0 0 1px rgba(0, 0, 0, 0.02);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  max-width: 420px;
  width: 100%;
}

.login-card:hover {
  box-shadow:
    0 10px 15px -3px rgba(102, 126, 234, 0.08),
    0 4px 6px -2px rgba(102, 126, 234, 0.04),
    0 0 0 1px rgba(102, 126, 234, 0.08);
  border-color: rgba(102, 126, 234, 0.15);
}

.card-content {
  border-radius: 16px;
  padding: 2rem;
  background: white;
}

/* 表单样式 */
.login-form {
  margin-top: 0;
}

.form-item-custom {
  margin-bottom: 1rem;
}

.form-label {
  font-size: 0.8125rem;
  font-weight: 500;
  color: #1e293b;
  margin-bottom: 0.375rem;
}

.input-custom :deep(.ant-input),
.input-custom :deep(.ant-input-password),
.input-custom :deep(.ant-input-password input),
.input-custom :deep(.ant-input-affix-wrapper) {
  border: none !important;
  border-radius: 0 !important;
  padding: 0.625rem 0.875rem 0.625rem 2.5rem;
  font-size: 0.875rem;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  background: transparent !important;
  height: 44px;
  box-shadow: none !important;
}

.input-custom :deep(.ant-input-password) {
  padding: 0 !important;
}

.input-custom :deep(.ant-input-password input) {
  padding: 0.625rem 0.875rem 0.625rem 0 !important;
}

.input-custom :deep(.ant-input:focus),
.input-custom :deep(.ant-input-password:focus),
.input-custom :deep(.ant-input-affix-wrapper:focus),
.input-custom :deep(.ant-input-password input:focus) {
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
}

.input-custom :deep(.ant-input:hover),
.input-custom :deep(.ant-input-password:hover),
.input-custom :deep(.ant-input-affix-wrapper:hover),
.input-custom :deep(.ant-input-password input:hover) {
  border: none !important;
  background: transparent !important;
}

.input-icon {
  color: #94a3b8;
  font-size: 0.875rem;
}

/* 表单选项 */
.form-options {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.25rem;
}

.remember-checkbox :deep(.ant-checkbox-inner) {
  border-radius: 4px;
  border-width: 1.5px;
}

.checkbox-label {
  font-size: 0.8125rem;
  color: #475569;
  font-weight: 400;
}

.forgot-link {
  font-size: 0.8125rem;
  color: #667eea;
  font-weight: 500;
  text-decoration: none;
  transition: color 0.2s ease;
}

.forgot-link:hover {
  color: #5568d3;
}

/* 提交按钮 */
.submit-button {
  height: 44px;
  border-radius: 10px;
  border: 0;
  font-weight: 600;
  font-size: 0.9375rem;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.submit-button::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: left 0.5s ease;
}

.submit-button:hover::before {
  left: 100%;
}

.submit-button:not(:disabled):hover {
  background: linear-gradient(135deg, #5568d3 0%, #654393 100%);
  box-shadow: 0 4px 12px -2px rgba(102, 126, 234, 0.4);
  transform: translateY(-1px);
}

.submit-button:not(:disabled):active {
  transform: scale(0.98);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.button-text {
  position: relative;
  z-index: 1;
}

/* 隐藏 Ant Design 的加载图标 */
.submit-button :deep(.anticon-loading) {
  display: none !important;
}

.submit-button :deep(.ant-btn-loading-icon) {
  display: none !important;
}

/* 确保加载状态下文字居中 */
.submit-button.ant-btn-loading {
  pointer-events: none;
}

.submit-button.ant-btn-loading .button-text {
  animation: pulse 1.5s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.7;
  }
}

/* 快速登录 */
.quick-login-section {
  margin-top: 1.75rem;
  padding-top: 1.75rem;
  border-top: 1px solid #f1f5f9;
}

.divider {
  position: relative;
  text-align: center;
  margin-bottom: 1rem;
}

.divider::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  height: 1px;
  background: #f1f5f9;
}

.divider-text {
  position: relative;
  display: inline-block;
  padding: 0 0.75rem;
  font-size: 0.6875rem;
  font-weight: 500;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: white;
}

.quick-login-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.5rem;
}

.quick-login-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.375rem;
  padding: 0.75rem 0.5rem;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #f8fafc;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.quick-login-card:hover {
  border-color: #667eea;
  background: #f0f4ff;
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(102, 126, 234, 0.1);
}

.quick-login-card:active {
  transform: translateY(0);
}

.quick-icon {
  font-size: 1.125rem;
  color: #64748b;
  transition: all 0.2s ease;
}

.quick-login-card:hover .quick-icon {
  color: #667eea;
  transform: scale(1.05);
}

.quick-label {
  font-size: 0.75rem;
  font-weight: 500;
  color: #64748b;
  transition: color 0.2s ease;
}

.quick-login-card:hover .quick-label {
  color: #667eea;
}

/* 粒子动画 */
.particles {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.particle {
  position: absolute;
  width: 4px;
  height: 4px;
  background: radial-gradient(circle, rgba(99, 102, 241, 0.8), transparent);
  border-radius: 50%;
  animation: float-particle linear infinite;
}

@keyframes float-particle {
  0% {
    transform: translateY(0) translateX(0);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    transform: translateY(-100vh) translateX(50px);
    opacity: 0;
  }
}

/* 表单动画 */
.login-card-wrapper {
  animation: fade-in-up 0.8s ease-out;
}

@keyframes fade-in-up {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 页脚文字 */
.footer-text {
  position: fixed;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.75rem;
  color: #94a3b8;
  text-align: center;
  font-weight: 400;
  letter-spacing: 0.02em;
}
</style>
